<template>
    <div class="container">
        <!-- 底部挡板 -->
        <div class="board" :style="{ left: boardX + 'px' }"></div>
        <!-- 弹球 -->
        <div class="ball" :style="{ left: ballX + 'px', top: ballY + 'px' }"></div>
        <!-- 游戏结束提示 -->
        <h1 v-if="fail" style="text-align: center;">游戏失败</h1>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const boardX = ref(0); // 控制挡板位置
const ballX = ref(0);   // 控制弹球位置
const ballY = ref(0);
const rateX = ref(0.1); // 控制弹球移动速度
const rateY = ref(0.1);
const fail = ref(false); // 控制结束游戏提示的展示

const timer = setInterval(() => {
    // 到达右侧边缘进行反弹
    if (ballX.value + rateX.value >= 440 - 30) {
        rateX.value *= -1;
    }
    // 到达左侧边缘进行反弹
    if (ballX.value + rateX.value <= 0) {
        rateX.value *= -1;
    }
    // 到达上侧边缘进行反弹
    if (ballY.value + rateY.value <= 0) {
        rateY.value *= -1;
    }
    ballX.value += rateX.value;
    ballY.value += rateY.value;

    // 失败判定
    if (ballY.value >= 440 - 30 - 10) {
        // 挡板接住了弹球，进行反弹
        if (boardX.value <= ballX.value + 30 && boardX.value + 80 >= ballX.value) {
            rateY.value *= -1;
        } else {
            // 没有接住弹球，游戏结束
            clearInterval(timer);
            fail.value = true;
        }
    }
}, 2);

onMounted(() => {
    // 随机弹球的运动速度和方向
    rateX.value = (Math.random() * 0.5 + 0.1);
    rateY.value = (Math.random() * 0.5 + 0.1);
    // 添加键盘事件
    document.addEventListener('keydown', keydown);
});

const keydown = (event) => {
    if (event.key === 'ArrowLeft') {
        if (boardX.value > 10) {
            boardX.value -= 20;
        }
    } else if (event.key === 'ArrowRight') {
        if (boardX.value < 440 - 80) {
            boardX.value += 20;
        }
    }
};
</script>

<style scoped>
.container {
    position: relative;
    margin: 0 auto;
    width: 440px;
    height: 440px;
    background-color: #1a1a1a; /* 深色背景 */
    border: 3px solid #00ffcc; /* 亮色边框 */
    border-radius: 20px; /* 更大的圆角 */
    overflow: hidden; /* 清除内部溢出 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* 深色阴影 */
}

.ball {
    position: absolute;
    width: 35px;
    height: 35px;
    left: 50%; /* 中心对齐 */
    top: 50%; /* 中心对齐 */
    transform: translate(-50%, -50%); /* 调整定位 */
    background-color: #ff007f; /* 鲜艳的粉色 */
    border-radius: 50%; /* 完全圆形 */
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.6); /* 发光效果 */
    transition: transform 0.2s, background-color 0.2s; /* 动画效果 */
}

.ball:hover {
    transform: translate(-50%, -50%) scale(1.1); /* 悬浮时轻微放大 */
    background-color: #ff66b2; /* 悬浮时颜色变化 */
}

.board {
    position: absolute;
    left: 50%;
    bottom: 15px; /* 向上抬高底部位置 */
    height: 12px; /* 板的高度 */
    width: 100px; /* 板的宽度 */
    border-radius: 6px; /* 圆角 */
    background-color: #00ffcc; /* 亮色 */
    transform: translateX(-50%); /* 中心对齐 */
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.5); /* 发光效果 */
    transition: transform 0.3s, background-color 0.3s; /* 动画效果 */
}

.board:hover {
    transform: translateX(-50%) scale(1.1); /* 悬浮时放大 */
    background-color: #66ffe8; /* 悬浮时颜色变化 */
}

</style>
